<template>
  <div :class="['w-full h-full progress-chart', 'progress-' + props.type]" ref="progressChart"></div>
</template>

<script lang="ts" setup>
import { defineComponent, markRaw, onMounted, onUnmounted, ref } from 'vue';
import * as echarts from 'echarts';
import 'echarts-liquidfill'; // 引入水球图的组件

defineComponent({ name: 'ProgressChart' });

const props = defineProps({
  echartsData: {
    type: Number,
    default: 0,
  },
  type: {
    type: String,
    default: 'red',
  },
  borderColor: {
    type: Array,
    default: () => ['rgba(255, 182, 182, 1)', 'rgba(102, 22, 22, 1)']
  },
  color: {
    type: Array,
    default: () => {
      return ['rgba(102, 22, 22, 1)', 'rgba(255, 182, 182, 1)'];
    },
  },
  titleText: {
    type: String,
    default: '分',
  }
});

const progressChart = ref();
let myChart = ref<any>(null);

function initEcharts(val: number) {
  myChart.value = markRaw(echarts.init(progressChart.value));
  const borderColor: any[] = props.borderColor || []
  const colors = props.color
  const titleText = props.titleText
  const data = [val / 100, val / 100];
  const option = {
    title: [
      {
        text: val,
        textStyle: {
          fontSize: 34,
          fontFamily: 'D-DIN-PRO',
          color: '#ffffff',
        },
        left: 'center',
        top: '30%'
      },
      {
        text: titleText,
        textStyle: {
          fontSize: 14,
          fontFamily: 'D-DIN-PRO',
          color: '#fff',
        },
        left: '55%',
        top: '36%'
      },
    ],
    series: [
      {
        type: 'liquidFill',
        radius: '50%',
        center: ['50%', '50%'],
        data: data,
        color: borderColor,
        backgroundStyle: {
          color: borderColor[1],
        },
        outline: {
          show: true,
          borderDistance: 0,
          itemStyle: {
            borderWidth: 2,
            borderColor: colors,
          },
        },
        label: {
          show: false,
          position: 'top',
          color: '#fff',
          baseline: 'bottom',
          normal: {
            show: false,
          },
        },
      },
      {
        name: '外边框',
        type: 'pie',
        z: 5,
        hoverAnimation: false, // 取消掉环形图鼠标移上去时自动放大
        radius: ['52%', '56%'],
        center: ['50%', '50%'],
        label: {
          show: false,
        },
        data: [
          {
            value: 100,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0.05,
                  color: borderColor[0],
                },
                {
                  offset: 1,
                  color: borderColor[1],
                }
              ]),
            },
          },
        ],
      },
    ],
  };
  myChart.value.setOption(option, true);
  window.addEventListener('resize', () => {
    if (myChart.value) myChart.value.resize();
  });
}

function destroyEcharts() {
  if (myChart.value) {
    myChart.value.dispose();
    myChart.value = null;
  }
}

onMounted(() => {
  initEcharts(props.echartsData);
});

onUnmounted(() => {
  destroyEcharts();
});
</script>

<style scoped>
.progress-red {
  background: url('./assets/progress-red-bg.png') no-repeat center;
  background-size: contain;
}

.progress-green {
  background: url('./assets/progress-green-bg.png') no-repeat center;
  background-size: contain;
}
</style>
